<template>
	<div class="my">
		<div class="mine">
			<div class="me">
				<div style="margin-top:0.5rem;">
					<div class="landl" style="margin-bottom:0.7rem;">
						<div><router-link class="photo" to="../login"><img src="../../../static/img/mine/photo.jpg"/></router-link></div>
						<div class="go-font">
							<div><router-link class="lal-colour" to="../login">登录/注册<Icon type="ios-arrow-forward" style="color:#96999e;"/></router-link></div>
							<div style="padding:0 0.1rem; background-color:#f3f3f3;"><router-link to="../login"><span style="color:#96999e; font-size:0.25rem;">注册手机号不会透露给经纪人</span></router-link></div>
						</div>
					</div>
					<!--  v-if="mineToggle" {{userName}}-->
					<!-- <div>
						<div>
							<router-link class="landl" to="/user/myMess">
								<div class="photo"><img src="../../../static/img/mine/photo.jpg" alt=""></div>
								<div class="go-font">
									<div class="lal-colour">嘿嘿嘿</div>
									<div><span style="color:#949799; font-size:0.25rem;">查看并编辑个人资料</span></div>
								</div>
							</router-link>
						</div>
						<div class="mineMess">
							<div>
								<ul>
									<li>
										<router-link to="">
											<div class="numcon">
												<div style="color:black;font-size:0.36rem;font-weight:600;font-family:'BatangChe';">0</div>
												<div style="font-size:0.2rem;color:#949799;">看房记录</div>
											</div>
										</router-link>
									</li>
									<li>
										<router-link to="">
											<div class="numcon">
												<div style="color:black;font-size:0.36rem;font-weight:600;font-family:'BatangChe';">0</div>
												<div style="font-size:0.2rem;color:#949799;">我的委托</div>
											</div>
										</router-link>
									</li>
									<li>
										<router-link to="">
											<div class="numcon">
												<div style="color:black;font-size:0.36rem;font-weight:600;font-family:'BatangChe';">0</div>
												<div style="font-size:0.2rem;color:#949799;">搜索订阅</div>
											</div>
										</router-link>
									</li>
								</ul>
							</div>
						</div>
					</div> -->
				</div>
				<div class="myhouse">
					<div class="my-title"  style="display:flex;justify-content:space-between;">
						<div style="color:#0f1521;font-size:0.4rem;">我的房子</div>
						<div><router-link to="" style="color:#949799; font-size:0.25rem;">添加房产<Icon type="ios-arrow-forward"/></router-link></div>
					</div>
					<div class="addDynamic">
						<router-link to="">
							<div class="addDynamicbox">
								<div style="color:#515a6e;display:flex;flex-flow:column;">
									<span>添加我的房产</span>
									<span>随时掌握房产动态</span>
								</div>
								<div style="font-size:0.2rem;margin-top:0.2rem;"><span style="color:#1b996a;">去添加</span></div>
							</div>
						</router-link>
					</div>
				</div>
				<div class="myfocusbox">
					<div class="my-title" style="display:flex;justify-content:space-between;">
						<div style="color:#0f1521;font-size:0.4rem;">我关注的</div>
					</div>
					<focuslist :modelfocus="modelfocus"></focuslist>
				</div>
				<div class="servicebox">
					<div class="my-title" style="display:flex;justify-content:space-between;">
						<div style="color:#0f1521;font-size:0.4rem;">其他服务</div>
					</div>
					<servicelist :modelservice="modelservice"></servicelist>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import focuslist from './son/focuslist';
	import servicelist from './son/servicelist';
	export default {
	  	name: 'my',
	  	data(){
		  	return{
				// mineToggle:null,
				modelfocus:[{
					pic:require("../../../static/img/mine/home.png"),
					textf:"二手房(0)"
				},{
					pic:require("../../../static/img/mine/newhome.png"),
					textf:"新房(0)"
				},{
					pic:require("../../../static/img/mine/rent.png"),
					textf:"租房(0)"
				},{
					pic:require("../../../static/img/mine/qu.png"),
					textf:"小区(0)"
				},{
					pic:require("../../../static/img/mine/biaoqian.png"),
					textf:"标签(0)"
				}],
				modelservice:[{
					img:require("../../../static/img/mine/service/jingjiren.png"),
					texts:"我的经纪人"
				},{
					img:require("../../../static/img/mine/service/wenda.png"),
					texts:"我的问答"
				},{
					img:require("../../../static/img/mine/service/dianping.png"),
					texts:"我的点评"
				},{
					img:require("../../../static/img/mine/service/callkefu.png"),
					texts:"联系客服"
				},{
					img:require("../../../static/img/mine/service/kefuing.png"),
					texts:"官方在线客服"
				},{
					img:require("../../../static/img/mine/service/wenjuan.png"),
					texts:"问卷调查"
				}],
			}
		},
		methods: {
			toggleMine(){
				// this.mineToggle =! this.mineToggle;
		  	},
		},
        components:{
			focuslist,
			servicelist,
        }
	}
</script>

<style>
	*{
		margin:0;
		padding:0;
	}
	.mine{
		width:7.5rem;
		overflow:hidden;  
	}
	.me{
		width:6.9rem;
		margin: 0.1rem 0.3rem 0.1rem 0.3rem;
	}
	.landl{
		display:flex;
		justify-content:flex-start;
		margin-top:0.2rem;
		margin-bottom:0.2rem;
	}
	.mineMess{
		margin-bottom:0.7rem;
	}
	.photo{
		width:1rem;
		height:1rem;
		margin-right:0.2rem;
	}
	.photo>img{
		width:1rem;
		height:1rem;
		border-radius: 50%;
	}
	.go-font{
		display:flex;
		flex-flow:column;
	}
	.lal-colour{
		color:#0f1521;
		font-size:0.4rem;
	}
	.mineMess ul{
		list-style:none;
		display:flex;
	}
	.mineMess ul>li{
		margin-right:1.1rem;
	}
	.numcon{
		display:flex;
		flex-flow:column;
	}
	.myhouse{
		margin-bottom:0.7rem;
	}
	.my-title{
		margin-bottom:0.4rem;
	}
	.addDynamic{
		width:6.3rem;
		margin-top:0.15rem;
		margin-left:0.2rem;
		border:1px solid #DCDCDC;
		box-sizing:border-box;
		border-radius:0.1rem;
	}
	.addDynamicbox{
		margin-top:0.3rem;
		margin-left:0.7rem;
		margin-bottom:0.3rem;
	}
	.myfocusbox{
		margin-bottom:0.6rem;
	}
	.servicebox{
		margin-bottom:2rem;
	}
</style>
